<template>
  <div class="home">
      <el-row :gutter="20" class="nav">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <h3>管理合同</h3>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="grid-content bg-purple">
            <el-tabs>
              <el-tab-pane label="用户管理" name="first"></el-tab-pane>
              <el-tab-pane label="配置管理" name="second"></el-tab-pane>
              <el-tab-pane label="角色管理" name="third"></el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple">
            
          </div>
        </el-col>
      </el-row>

    <el-row :gutter="20">

      <el-col :span="16" :offset="4"><div class="grid-content bg-purple">

        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="dialogVisible = true">添加合同</el-button>

        <!-- 模态框 -->
        <el-dialog title="添加合同" :visible.sync="dialogVisible" width="30%">
          <!-- 表单 -->
          <el-form ref="form" label-width="80px">

            <!-- 合同编号 -->
            <el-form-item label="合同编号">
              <el-input placeholder="请输入合同编号" v-model="bHao" clearable></el-input>
            </el-form-item>

            <!-- 合同金额 -->
            <el-form-item label="合同金额">
              <el-input placeholder="请输入合同金额" v-model="jE" clearable></el-input>
            </el-form-item>

            <!-- 合同修改日期 -->
            <el-form-item label="修改日期">
              <el-date-picker v-model="rQi" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable></el-date-picker>
            </el-form-item>

            <!-- 合同状态 -->
            <el-form-item label="合同状态">
              <el-select v-model="zTai" clearable placeholder="请选择">
                <el-option value="未放款">未放款</el-option>
                <el-option  value="未结清">未结清</el-option>
                <el-option  value="已结清">已结清</el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"  :plain="true" @click="add(),dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 模态框 -->
        <el-dialog title="修改合同" :visible.sync="dialogV" width="30%">
          <!-- 表单 -->
          <el-form ref="form" label-width="80px">

            <!-- 合同编号 -->
            <el-form-item label="合同编号">
              <el-input placeholder="请输入合同编号" v-model="bHao" clearable></el-input>
            </el-form-item>

            <!-- 合同金额 -->
            <el-form-item label="合同金额">
              <el-input placeholder="请输入合同金额" v-model="jE" clearable></el-input>
            </el-form-item>

            <!-- 合同修改日期 -->
            <el-form-item label="修改日期">
              <el-date-picker v-model="rQi" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable></el-date-picker>
            </el-form-item>

            <!-- 合同状态 -->
            <el-form-item label="合同状态">
              <el-select v-model="zTai" clearable placeholder="请选择">
                <el-option value="未放款">未放款</el-option>
                <el-option  value="未结清">未结清</el-option>
                <el-option  value="已结清">已结清</el-option>
              </el-select>
            </el-form-item>

          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogV = false">取 消</el-button>
            <el-button type="primary"  :plain="true" @click="editUpdate(),dialogV = false">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 合同列表 -->
        <el-tag class="item" v-for="(item,index) in list" :key="index" :type="item.ztai === '未放款'?'danger': item.ztai === '未结清'?'':'success'">
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">{{item.bhao}}</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">{{item.je}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">{{item.xgrq}}</div></el-col>
            <el-col :span="3"><div class="grid-content bg-purple">
              <div class="btn">
                <el-row>
                  <el-button type="warning" size="mini" @click="edit(item.bhao),dialogV = true">详情</el-button>
                </el-row>
                <el-row>
                  <el-button type="danger" size="mini" @click="del(item.bhao,index)">删除</el-button>
                </el-row>
              </div>
            </div></el-col>
            <el-col :span="1"><div class="grid-content bg-purple text">{{item.ztai}}</div></el-col>
          </el-row>
        </el-tag>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
    data() {
      return {
        activeName: 'first',
        dialogVisible: false,
        dialogV: false,
        list: [],
        bHao: '',
        jE: '',
        rQi: '',
        zTai: ''
      };
    },
    created(){
      this.$axios.get("/api/getHtongList").then((res)=>{
        this.list = res.data.extend.htong;
      })
    },
    methods: {
      editUpdate(){
        var data = {
          bhao: this.bHao,
          je: this.jE,
          xgrq: this.rQi,
          ztai: this.zTai
        }

        this.$axios({
          url:"/api/editUpdate",
          method: "POST",
          data: data
        })
        .then(()=>{
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        })

      },
      edit(bhao){
        console.log(bhao);
        this.$axios({
          url:"/api/edit",
          method: "GET",
          params: {
            'bhao': bhao
          }
        })
        .then((res)=>{
          this.bHao = res.data.extend.htong.bhao,
          this.jE = res.data.extend.htong.je,
          this.rQi = res.data.extend.htong.xgrq,
          this.zTai = res.data.extend.htong.ztai
        })
      },
      del(bhao,index){
        this.$axios({
          url:"/api/delete",
          method: "GET",
          params: {
            'bhao': bhao
          }
        })
        .then(()=>{
          this.list.splice(index,1)
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        })
      },
      add () {
        var data = {
          bhao: this.bHao,
          je: this.jE,
          xgrq: this.rQi,
          ztai: this.zTai
        }

        this.$axios({
          url:"/api/insert",
          method: "POST",
          data: data
        })
        .then(()=>{
          this.list.push(data);
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        })
        // this.$axios.get("/api/insert",dat).then((res)=>{
        //   this.$message({
        //   message: '添加成功',
        //   type: 'success'
        // });
        //   console.log(res.data);
        // })
      }
    }
};
</script>

<style lang="scss" scoped>
.home{
  overflow: hidden;
}
.nav{
  height: 40px;
  border-bottom: 2px solid 	Gainsboro;
  box-sizing: border-box;
}
h3{
  margin: 0;
  line-height: 40px;
}
::v-deep .el-tabs__nav-wrap::after{
  height: 0;
  
}
.item{
  width: 100%;
  height: auto;
  line-height: 80px;
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
}
.btn{
  width: 60%;
  height: 80px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
}
</style>